<template>
  <div>
    <Form
      oneitem="人员搜索："
      twoitem="角色："
      :total-count="totalCount"
      :total-page="totalPage"
      :page-index="pageIndex"
      :search-list="userWorkList"
      :add-click-show="false"
      :option="roleList"
      @changeList="hangeList"
      @searchResultFn="searchResultFn"
    >
      <template #tableForm>
        <el-table-column label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="userName" label="人员名称" width="219" />
        <el-table-column prop="roleName" label="角色" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column prop="workCount" label="完成工单（本月）" />
        <el-table-column prop="progressTotal" label="进行中工单" />
        <el-table-column prop="cancelCount" label="拒绝工单（本月）" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="infoFn(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <el-dialog v-if="userInfo" title="人员详情" :visible.sync="infoVisible" width="630px">
      <el-row style="height: 86px;padding: 19px 19px 0;background: #f3f6fb;">
        <el-col :span="8"><div class="grid-content bg-purple">人员名称：{{ userInfo.userName }}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">角色：{{ userInfo.roleName }}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">联系电话：{{ userInfo.mobile }}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">负责区域：{{ userInfo.regionName }}</div></el-col>
      </el-row>
      <el-table :data="totalWork" style="  text-align: center;">
        <el-table-column property="time" />
        <el-table-column property="total" label="总工单数" />
        <el-table-column property="cancelCount" label="拒绝工单" />
        <el-table-column property="workCount" label="完成工单" />
        <el-table-column property="progressTotal" label="进行中工单" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { searchUserWork, totalUserWork, userInfo, roleList } from '@/api'
import { getFirstDayOfWeek, parseTime } from '@/utils'
export default {
  components: { Form },
  data() {
    return {
      userWorkList: [],
      pageIndex: 1,
      totalPage: null,
      totalCount: null,
      infoVisible: false,
      totalWork: [],
      userInfo: null,
      roleList: null,
      isRepair: null,
      searchForm: null
    }
  },
  async  created() {
    const res = await this.userList(this.pageIndex)
    const res1 = await roleList()
    this.userWorkList = res.currentPageRecords
    this.totalCount = res.totalCount
    this.totalPage = res.totalPage
    res1.data.forEach(item => {
      item.statusId = item.roleId
      item.statusName = item.roleName
    })
    this.roleList = res1.data
    console.log(this.roleList)
  },
  // 列表
  methods: {
    async userList(pageIndex, userName, roleId, isRepair) {
      const res = await searchUserWork({
        pageIndex,
        pageSize: 10,
        userName,
        roleId,
        isRepair
      })
      return res.data
    },
    indexMethod(index) {
      return this.pageIndex === 1 ? index + 1 : Number(`${this.pageIndex - 1}${index}`) + 1
    },
    async hangeList(page) {
      this.pageIndex = page
      if (this.searchForm) {
        const res = await this.userList(this.pageIndex, this.searchForm.taskCode, this.searchForm.statusId)
        this.userWorkList = res.currentPageRecords
      } else {
        const res = await this.userList(this.pageIndex)
        this.userWorkList = res.currentPageRecords
      }
    },
    async searchResultFn(form) {
      this.searchForm = form
      const res = await this.userList(this.pageIndex, form.taskCode, form.statusId)
      this.userWorkList = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    // 查看详情
    async infoFn(row) {
      const res = await totalUserWork({
        userId: row.userId,
        start: parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d} 00:00:00'),
        end: parseTime(new Date(), '{y}-{m}-{d} 23:59:59')
      })
      const res1 = await totalUserWork({
        userId: row.userId,
        start: parseTime(new Date(), `{y}-${(new Date()).getMonth() + 1}-01 00:00:00`),
        end: parseTime(new Date(), '{y}-{m}-{d} 23:59:59')
      })
      const res2 = await totalUserWork({
        userId: row.userId,
        start: parseTime(new Date(), `${(new Date()).getFullYear()}-01-01 00:00:00`),
        end: parseTime(new Date(), '{y}-{m}-{d} 23:59:59')
      })
      res.data.time = '本周'
      res1.data.time = '本月'
      res2.data.time = '本年'
      this.totalWork = [res.data, res1.data, res2.data]
      console.log(row)
      const res4 = await userInfo(row.userId)
      this.userInfo = res4.data
      this.infoVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table .cell{
  text-align: center;
}
</style>
